import React, { useEffect, useRef, useContext, useState, useCallback, useMemo } from 'react';
import { ImageBackground, ScrollView, Share, StyleSheet, Text, TouchableOpacity, View, Dimensions, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Device from '../util/device';

const createStyles = () =>
    StyleSheet.create({
        item: {
            backgroundColor: '#fff',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: 10,
            borderTopColor: '#EEE',

            // shadowColor: '#ddd',
            // shadowOffset: { width: 2, height: 2 },
            // shadowOpacity: 0.8,
            // shadowRadius: 3,
            backgroundColor: "#fff",
            // padding:8,
            // margin: 5,
            borderRadius: 10,
        },
        itemLeft: {
            flexDirection: 'row',
            alignItems: 'center',
        },
        itemLeftText: {
            paddingLeft: 10,
            fontSize: 16,
            fontWeight: 'bold'
            // color:NovelAppConfig.mainColors.pri
        },
        loginSuc: {
            height: Device.getDeviceHeight / 3,
            justifyContent: 'center',
            alignItems: 'center',
            borderColor: '#eee',
            backgroundColor: '#fffffe'
        },
        imgContent: {
            width: Device.getDeviceWidth / 5,
            height: Device.getDeviceWidth / 5,
            borderRadius: Device.getDeviceWidth / 8,
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 20
        },
        skinModalContainer: {
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'rgba(0,0,0,.1)',
            flex: 1,
        },

        skinModalContent: {
            width: Device.getDeviceWidth / 4 * 3,
            backgroundColor: '#fff',
            // borderRadius: 5
        },
        itemValue: {
            fontSize: 12,
            color: '#999999'
        },
    });
const width = Dimensions.get('window').width;
const height = width / 5 * 3
export const My = (props) => {
    const styles = createStyles()

    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <ImageBackground
                source={require('../../img/jb1.jpeg')} style={{ height: height, width: width, opacity: 0.8 }}>

            </ImageBackground>
            {/* <View style={{ width: '100%', alignSelf: 'center', justifyContent: 'center', alignItems: 'center', marginTop: -35 }}>
                <View style={{ width: '90%', height: 70, borderRadius: 12, backgroundColor: 'rgba(233,233,233,0.1)', alignItems: 'center',flexDirection:'row' }}>
                    <View style={{ width: 50, height: 50, borderRadius: 25, backgroundColor: 'rgba(233,233,233,0.4)', justifyContent: 'center', alignItems: 'center' }}>
                        <Image style={{width: 50, height: 50, borderRadius: 25,}} source={require('../../img/myicon.jpg')}/>
                    </View>
                    <View style={{marginStart:5}}>
                    <Text style={{ color: '#000',marginBottom:5,fontSize:14}}>游客</Text>
                    <Text style={{ color: '#262626' ,fontSize:14}}></Text></View>
                </View>

            </View> */}
           <View edges="top" style={{flex:1, backgroundColor: 'rgb(251,251,251)', padding: 14, }}>
                <View style={{ borderRadius: 10, paddingVertical: 10,backgroundColor: '#fff'}}>
                    <TouchableOpacity
                        style={{
                            flexDirection:'row',alignItems:'center',
                            justifyContent:'space-between'
                        }}
                        onPress={() => {
                            props.navigation.navigate('Collect')

                        }}>
                        <View style={styles.item}>
                            <View style={styles.itemLeft}>
                                <Ionicons
                                    name='heart-outline'
                                    size={22}
                                    color={"#000"}
                                // onPress={this._search.bind(this)}
                                />
                                {/* <Image style={{ width: 22, height: 22 }} source={require('../../data/img/about.png')} /> */}
                                <Text style={styles.itemLeftText}>收藏</Text>
                            </View>
                        </View>
                        <Ionicons
                                    name='chevron-forward-outline'
                                    size={22}
                                    color={"#ddd"}
                                // onPress={this._search.bind(this)}
                                />
                    </TouchableOpacity>
                </View>
                <View style={{marginTop:10, borderRadius: 10, paddingVertical: 10, backgroundColor: '#fff'}}>
                    <TouchableOpacity
                        style={{
                            flexDirection:'row',alignItems:'center',
                            justifyContent:'space-between'
                        }}
                        onPress={() => {
                            Share.share({ message: "《起名册子》是一款很好用的智能起名应用，现在推荐给你。请在App Store应用商店下载。", title: "起名册子", url: "https://apps.apple.com/cn/app/起名册子-孩子取名起名字大全/id6450860414" })

                        }}>
                        <View style={styles.item}>
                            <View style={styles.itemLeft}>
                                <Ionicons
                                    name='share-outline'
                                    size={22}
                                    color={"#000"}
                                // onPress={this._search.bind(this)}
                                />
                                {/* <Image style={{ width: 22, height: 22 }} source={require('../../data/img/about.png')} /> */}
                                <Text style={styles.itemLeftText}>分享给好友</Text>
                            </View>
                        </View>
                        <Ionicons
                                    name='chevron-forward-outline'
                                    size={22}
                                    color={"#ddd"}
                                // onPress={this._search.bind(this)}
                                />
                    </TouchableOpacity>
                </View>
                <View style={{ borderRadius: 10, paddingVertical: 10, backgroundColor: '#fff'}}>
                    <TouchableOpacity
                        style={{
                            flexDirection:'row',alignItems:'center',
                            justifyContent:'space-between'
                        }}
                        onPress={() => {
                            props.navigation.navigate('AboutUs')

                        }}>
                        <View style={styles.item}>
                            <View style={styles.itemLeft}>
                                <Ionicons
                                    name='people-outline'
                                    size={22}
                                    color={"#000"}
                                // onPress={this._search.bind(this)}
                                />
                                {/* <Image style={{ width: 22, height: 22 }} source={require('../../data/img/about.png')} /> */}
                                <Text style={styles.itemLeftText}>关于我们</Text>
                            </View>
                        </View>
                        <Ionicons
                                    name='chevron-forward-outline'
                                    size={22}
                                    color={"#ddd"}
                                // onPress={this._search.bind(this)}
                                />
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}
